<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { Locale } from 'vant'
import { vipListApi } from '@/api/user'
definePageMeta({
    layout: 'default-custom',
    // name: 'home',
    title: 'vip',
    i18n: 'menu.vip',
});
const router = useRouter()
const goBack = () => {
    router.go(-1)
}
// 初始进度0%
const realProgress = ref(0)
// 目标进度80%
const targetProgress = ref(0)
/** 进度平滑递增动画 */
function animateProgress() {
    let timer = setInterval(() => {
        if (realProgress.value >= targetProgress.value) {
            clearInterval(timer)
            realProgress.value = targetProgress.value
        } else {
            realProgress.value += 1
        }
    }, 10)
}
const fieldMap = {
    '升级奖励': 'upAmount',
    '月奖励': 'monthReward',
    '周奖励': 'weekReward',
    '提现奖励': 'withdrawDiscount',
    '亏损奖励': 'payAmount'
};
const vipArr = ref([])
const getVipListApi = () => {
    vipListApi().then((res: any) => {
        vipArr.value = vipArrFixed
            .map(vip => {
                const match = res.data.find((item: any) => item.vipId === vip.id);
                if (!match) return null;

                return {
                    id: vip.id,
                    name: vip.name,
                    url: vip.url,
                    itemArr: vip.itemArr.map(item => ({
                        ...item,
                        gold: match[fieldMap[item.title]] ?? 0
                    }))
                };
            })
            .filter(Boolean);
        console.log('vipArr:', vipArr.value);
    })
}
onMounted(async () => {
    // 获取用户信息
    // await userStore.getUserInfo()
    // console.log('我的--用户信息', userStore.user);
    targetProgress.value = 60
    animateProgress()
    getVipListApi()
})
const menuActive = ref(0)
const vipArrFixed = [
    { id: 1, name: 'VIP1', url: '/vip/vip_icon1.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
    { id: 2, name: 'VIP2', url: '/vip/vip_icon2.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
    { id: 3, name: 'VIP3', url: '/vip/vip_icon3.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
    { id: 4, name: 'VIP4', url: '/vip/vip_icon4.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
    { id: 5, name: 'VIP5', url: '/vip/vip_icon5.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
    { id: 6, name: 'VIP6', url: '/vip/vip_icon6.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
    { id: 7, name: 'VIP7', url: '/vip/vip_icon7.png', itemArr: [{ id: 1, title: '升级奖励' }, { id: 2, title: '月奖励' }, { id: 3, title: '周奖励' }, { id: 4, title: '提现奖励' }, { id: 5, title: '亏损奖励' }] },
]
const open = ref(false)
const textArr=ref([
    {id:1,topics:'I. What is FairGame VIP?',opens:false,conts:'FairGame VIP is a membership system of the platform, the higher the VIP level, the more benefits you can enjoy.The higher the VIP level, the more benefits you can enjoy.You can participate in free activities such as ‘UpgradeBonus’, ‘Daily Bonus’, ‘Loss Rebate’, etc. to get more helpin the game.'},
    {id:2,topics:'I. What is FairGame VIP?',opens:false,conts:'FairGame VIP is a membership system of the platform, the higher the VIP level, the more benefits you can enjoy.The higher the VIP level, the more benefits you can enjoy.You can participate in free activities such as ‘UpgradeBonus’, ‘Daily Bonus’, ‘Loss Rebate’, etc. to get more helpin the game.'},
])
</script>

<template>
    <div class="vip-main  color-#fffefe w-full pt-25 px-15">
        <!-- 头部 -->
        <div class="flex items-center justify-between">
            <div class="flex items-center ">
                <div class="bg-#394243  w-28 h-28 rounded-6 text-center leading-28 mr-10" @click="goBack">
                    <van-icon name="arrow-left" color="#FFFFFF" />
                </div>
                <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5">
            </div>
            <div class="flex items-center w-35% ">
                <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5">
                <div class="bg-#2d3233  rounded-6 absolute right-15 flex items-center justify-between">
                    <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5">
                    <div class="px-5">999</div>
                    <div class="add bg-#454c4c px-5 ">
                        <van-icon name="plus" :size="15" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 大图 -->
        <div class="mt-17 w-full">
            <div class="curVip">
                <div class="flex items-center">
                    <img src="/vip/v1.png" alt="" class="w-68 ">
                    <div class="ml-5">VIP1</div>
                </div>
                <!-- 进度 -->
                <div class="flex items-center justify-between px-15 mt-10 text-13">
                    <div class="">60%</div>
                    <div>
                        <span class="">R$ 0.00/R$ 56.97</span>
                        <van-icon name="info" color="#b3bdbc" class="ml-5" />
                    </div>
                </div>
                <!-- 进度条 -->
                <div class="mt-8 px-15">
                    <div class="bar" :style="{ width: realProgress + '%' }"></div>
                </div>
                <!-- vip图标 -->
                <div class="myflex justify-between px-15 mt-10 text-13">
                    <div class="myflex">
                        <van-icon name="gem" /><span class="ml-5">VIP1</span>
                    </div>
                    <div class="myflex">
                        <van-icon name="gem" /><span class="ml-5">VIP2</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-text">
            Learn more about the Vlp Upgrade System
        </div>
        <div>
            <van-tabs v-model:active="menuActive" animated swipeable>
                <van-tab v-for="(item, index) in vipArr" :key="item.id">
                    <template #title>
                        <div class="flex items-center flex-col justify-center">
                            <img :src="item.url" alt="" class="w-45 " :class="menuActive == index ? '' : 'inactive'">
                            <span class="text-12" :class="menuActive == index ? 'color-#eef3ff' : 'inactive'"> {{
                                item.name }}</span>
                        </div>
                    </template>
                    <div>
                        <div class="title">{{ item.name }}福利</div>
                        <div>
                            <div class="vip-item flex justify-between items-center px-15 py-10" :class="'item' + i"
                                v-for="(v, i) in item.itemArr" :key="index">
                                <div class="left mr-15">
                                    <img src="/vip/icon_upgrade.png" alt="" class="w-75">
                                </div>
                                <div class="right">
                                    <div class="text-14">{{ v.title }}</div>
                                    <div class="text-14 opacity-60">Upgrade your VIP level to receive a
                                        bonus!</div>
                                    <div>Award <span class="color-#2df083">R$ {{ v.gold }}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <div>
            <div class="title">FAQ</div>
            <div>
                <div class="faq-item" v-for="v in textArr" :key="v.id">
                    <div class="flex  justify-between items-center ">
                        <div class="topic">{{v.topics}}</div>
                        <div class="icon" @click="v.opens = !v.opens"><van-icon :name="v.opens ? 'arrow-down' : 'arrow-up'" />
                        </div>
                    </div>
                    <div class="cont" v-if="v.opens">{{v.conts}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="css">
.vip-main {
    background: #222628;
    margin-bottom: 40px;
}

.add {
    width: 55%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.curVip {
    width: 100%;
    height: 156px;
    border-radius: 12px;
    color: #ffffff;
    background: url('/vip/vip_bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 10px 8px;
}

.bar {
    height: 6px;
    background-image: linear-gradient(90deg,
            rgba(129, 131, 134, 0.6) 11%,
            rgba(147, 149, 152, 0.6) 24%,
            rgba(230, 231, 231, 0.8) 83%,
            #ffffff 100%),
        linear-gradient(#1f2b31,
            #1f2b31);
    border-radius: 3px;
}

.myflex {
    display: flex;
    align-items: center;
}

.top-text {
    width: 100%;
    height: 40px;
    background-color: #303636;
    border-radius: 6px;
    font-family: Roboto-Medium;
    font-size: 12px;
    color: #2df083;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 7px;
}

::v-deep .van-tabs--line .van-tabs__wrap {
    height: 68px;
    margin-top: 10px;
    background-image: linear-gradient(0deg,
            rgba(108, 76, 47, 0.5) 0%,
            rgba(65, 58, 53, 0.5) 32%,
            rgba(21, 40, 59, 0.5) 96%),
        linear-gradient(#192b36,
            #192b36);
    border-radius: 6px;
}

.inactive {
    /* filter: brightness(0) saturate(100%) invert(44%) sepia(8%) saturate(697%) hue-rotate(185deg) brightness(91%) contrast(90%); */
    color: #ffffff;
    font-size: 12px;
}

::v-deep .tabs .van-swipe-item .van-tab__panel-wrapper {
    background: #ffffff;
}

::v-deep .van-tabs {
    font-size: 12px;
}

::v-deep .van-tabs__nav {
    background: transparent;
}

::v-deep .van-tab--active {
    border-radius: 6px;
    background-color: rgba(255, 240, 219, 0.12);
}

::v-deep .van-tab--active img {
    width: 45px;
}

::v-deep .van-tabs__line {
    background: transparent;
    height: 30px;
    padding-bottom: 0;
}

::v-deep .van-tabs__nav--line {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.title {
    font-family: Roboto-Medium;
    font-size: 15px;
    color: #ffffff;
    margin: 15px 0;
}

.vip-item {
    /* background: url('/vip/'); */
    height: 107px;
    margin-bottom: 15px;

    background-blend-mode: normal,
        normal;
    border-radius: 6px;
}

.item0 {
    background-image: linear-gradient(90deg,
            rgba(33, 118, 211, 0.61) 1%,
            rgba(33, 118, 211, 0.31) 34%,
            #303636 59%),
        linear-gradient(#303636,
            #303636);
}

.item1 {
    background-image: linear-gradient(90deg,
            rgba(232, 146, 24, 0.61) 1%,
            rgba(232, 146, 24, 0.31) 34%,
            #303636 59%),
        linear-gradient(#303636,
            #303636);
}

.item2 {
    background-image: linear-gradient(90deg,
            rgba(195, 232, 24, 0.61) 1%,
            rgba(195, 232, 24, 0.31) 34%,
            #303636 59%),
        linear-gradient(#303636,
            #303636);
}

.item3 {
    background-image: linear-gradient(90deg,
            rgba(202, 67, 236, 0.61) 1%,
            rgba(202, 67, 236, 0.31) 34%,
            #303636 59%),
        linear-gradient(#303636,
            #303636);
}

.item4 {
    background-image: linear-gradient(90deg,
            rgba(67, 236, 170, 0.61) 1%,
            rgba(67, 236, 170, 0.31) 34%,
            #303636 59%),
        linear-gradient(#303636,
            #303636);
}

.faq-item {
    background-color: #2b3030;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
}

.topic {
    font-family: Roboto-Regular;
    font-size: 13px;
    color: #ffffff;
}

.icon {
    width: 28px;
    height: 29px;
    background-color: #394243;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.cont {
    font-family: Roboto-Regular;
    font-size: 12px;
    line-height: 18px;
    color: #ffffff;
    opacity: 0.6;
}
</style>